<script setup>
import Header from '@/components/header/Header.vue'
import RefundItem from './components/RefundItem.vue'
import RefundInformation from './components/RefundInformation.vue'
import Supplement from "./components/Supplement.vue"
import api from "@/api/index.js"
import {ref} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import {closeToast, showConfirmDialog, showLoadingToast, showToast} from "vant"

const route = useRoute()
const orderType = route.query.type
const router = useRouter()

const detail = ref(null)
const _getOrderInfo = () => {
  let apiGetOrderInfo
  if (orderType === 'hotel') {
    apiGetOrderInfo = api.getOrderInfohotel
  } else if (orderType === 'coupon') {
    apiGetOrderInfo = api.getCouponOrderInfo
  } else {
    apiGetOrderInfo = api.getOrderInfo
  }
  apiGetOrderInfo({
    orderNumber: route.params.id
  }).then((res) => {
    detail.value = res.data
  })
}
_getOrderInfo()
const descriptionvalue = ref('')
const fileList = ref([]);
const reasonvalue = ref('')

function onSelect(val) {
  reasonvalue.value = val
}

function handelSupplement(val) {
  descriptionvalue.value = val
}

function handleFiles(val) {
  fileList.value = val
  console.log('fileList', fileList)
}

// 退款按钮
function handelrefund() {

  showLoadingToast({
    message: '撤销中...',
    forbidClick: true,
    duration: 0
  })

  const refundOrderDto = {
    goodsDto: {
      cardId: detail.value?.memberCardVoList?.[0]?.id,
      skuId: detail.value?.spuListVos?.[0]?.spuId
    },
    orderNumber: route.params.id,
    refundReason: descriptionvalue.value,
    refundReasonId: reasonvalue.value.id,
    imagesIds: fileList.value.map(item => item.id).join(',')
  }
  let apiGetOrderInfo
  if (orderType === 'hotel') {
    apiGetOrderInfo = api.getHotelSubmitRefund
  } else if (orderType === 'coupon') {
    apiGetOrderInfo = api.getCouponSubmitRefund
  } else {
    apiGetOrderInfo = api.getScenicSubmitRefund
  }
  apiGetOrderInfo(refundOrderDto).then((res) => {
    if (res.code === '200') {
      closeToast()
      router.go(-1)
      showToast('操作成功')
    }
  })
}


</script>

<template>
  <div class="refund">
    <Header title="申请退款" :back="true"/>
    <div class="content">
      <RefundItem :detail="detail"/>
      <div class="refund_information">
        <RefundInformation :detail="detail" @onSelect="onSelect"/>
      </div>
      <Supplement :detail="detail" @handelSupplement="handelSupplement" @handleFiles="handleFiles"/>
      <div class="button" @click="()=>{
         showConfirmDialog({
     message: '确定退款吗?',

   }).then(()=>{
     handelrefund()
   });
      }">
        申请退款
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.refund {
  display: flex;
  flex-direction: column;
  height: 100vh;

  .content {
    flex: 1;
    padding: 1.5rem;
    background: #F9F8F3;
    overflow-y: auto;

    .refund_information {
      margin: 1.5rem 0;
    }

    .button {
      margin-top: 4rem;
      height: 5rem;
      background: var(--van-primary-color);
      border-radius: .5rem;
      line-height: 5rem;
      font-size: 1.6rem;
      color: #FFFFFF;
      text-align: center;
    }

    .button:active {
      background-color: rgb(41 142 142);
    }
  }
}
</style>